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CAPfTUL01 

Ola, JavaScript! 


Um motivo pelo qual JavaScript e tao popular e ser relativamente facil de ser acres- 
centado a uma pagina web. Tudo que voce precisa fazer e incluir pelo menos um 
elemento HTML script na pagina, especificar "text/javascript" para o atributo type e 
adicionar qualquer JavaScript que quiser: 
cscript type="text/javascript"> 

... aLgum codigo-fonte JavaScript 
</script> 

Nao e necessaria instalagao e voce tambem nao precisa ter que lidar com configuragoes 
estranhas de caminhos (paths) de alguma biblioteca. JavaScript funciona imedia- 
tamente e na maioria dos navegadores web, incluindo os quatro mais importantes: 
Firefox, Internet Explorer, Opera e Safari. Tudo o que voce tern que fazer e adicionar 
um bloco de scripting e ja esta em agao. 

Tradicionalmente, voce adiciona blocos escritos em JavaScript ao elemento head 
(cabegalho) do documento (delimitado por tags head de abertura e fechamento do 
cabegalho), mas voce tambem pode inclui-los no elemento body - ou ate em ambas 
as segoes. Todavia, adicionar um script ao corpo geralmente nao e considerada uma 
boa tecnica, ja que dificulta encontrar esse script quando voce for modifica-lo no 
futuro. A excegao a essa regra e quando o desempenho for uma preocupagao, o que 
sera visto no capitulo 6. Todos os exemplos neste livro adicionam blocos de scripting 
apenas a segao head (cabegalho) da pagina web. 

Hello World! 

Tambem e comum que o primeiro exemplo ao se aprender uma nova linguagem de 
programagao seja conhecido como “Hello World” - uma aplicagao muito simples 
que imprima essa mensagem na interface do usuario, seja qual esta for. No caso de 
JavaScript, a interface do usuario e a pagina web. O exemplo 1.1 mostra uma pagina 
web com um bloco em JavaScript que, usando apenas uma linha escrita nessa lin¬ 
guagem, abre uma pequena janela normalmente chamada de caixa de alerta com as 
palavras “Hello World!” 
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■=> Exemplo 1.1 - A menor aplicagao em JavaScript: "Hello World!" 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

<title>Hello, World!</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
cscript type="text/javascript"> 
alert("HellOj World!"); 

</script> 

</head> 

<body> 

</body> 

</html> 

Copiar o exemplo 1.1 para um arquivo e abri-lo em navegadores web que suportem 
JavaScript deve resultar em uma caixa de alerta onde se le “Hello World!”. Caso isso 
nao acontega, voce deve se assegurar de que JavaScript esteja habilitado. 

j V? | Versoes mais antigas do Internet Explorer tambem desabilitam scripts se voce abrir 
0 % a pagina pelo menu File Open em vez de usar um endereqo de pagina web como 
I ,k -’ http://<algum_dommio.com>/index.html. 

Essa aplicagao, embora muito limitada em funcionalidade, demonstra um pouco os 
componentes minimos de uma aplicagao JavaScript: voce tern uma pagina web, um 
elemento script e uma linha em JavaScript. Experimente voce mesmo, exceto editar 
a string substituindo a palavra “World” por seu nome. 

E claro que, se voce quiser fazer mais do que simplesmente imprimir uma mensagem 
no navegador, precisara estender de alguma forma esse exemplo. 

Hello World! novamente 

Outra variagao da aplicagao “Hello World! ” escreve a mensagem realmente na pagina 
web, em vez de em uma caixa de alerta. Para fazer isso, usa quatro componentes im- 
portantes de JavaScript: o objeto interno document do navegador, variaveis JavaScript, 
uma fungao JavaScript e um manipulador de eventos. Por incrivel que parega, voce 
ainda pode codificar a aplicagao em sete linhas de JavaScript, conforme mostra o 
exemplo 1.2. 

fo Exemplo 1.2 - "Hello World!"exibido na pagina web 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 
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<html xmlns="http://www.wB.org/1999/xhtml" xml:lang="en"> 

<head> 

<title>Hello, World!</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="text/javascript"> 
function hello() { 

// diz alo para o mundo 
var msg = "Hello, World!"; 
document.openQ; 
document.write(msg); 
document. closeQ; 

} 

</script> 

</head> 

<body onload="hello()"> 

<p>Hi</p> 

</body> 

</html> 

Embora o exemplo 1.2 seja uma aplicagao muito pequena, expoe diversos componentes 
basicos da maioria das aplicagoes em JavaScript em uso atualmente, cada um dos 
quais merecendo um exame mais detalhado. No resto deste capitulo, faremos esse 
exame mais de perto, um componente de cada vez. 



Ainda nao coberto neste capitulo e a Document Type Declaration (DOC-TYPE) 
usada nos exemplos 1.1 e 1.2, que pode influenciar como diferentes navegadores 
processam JavaScript. Abordarei o impacto de um DOCTYPE no capitulo 6. 


A tag script 

JavaScript e frequentemente usado dentro do contexto de outra linguagem, como as 
linguagens de marcagao HTML e XHTML. Entretanto, voce nao pode simplesmente 
colocar JavaScript na marcagao onde e como quiser. 

No exemplo 1.2, o elemento script content o codigo JavaScript. Isso informa o nave- 
gador o que, quando encontrar a tag de abertura do elemento de script, nao deve 
processar seu conteudo como HTML ou XHTML. Nesse momento, o controle sobre 
o conteudo e passado para o mecanismo de scripting do navegador. 

Nem todos os scripts existentes dentro de paginas web sao JavaScript, e a tag de 
abertura do elemento script content um atributo definindo o tipo do script. Nesse 
exemplo, este e apresentado como text/javascript. Entre outros valores permitidos 
para o atributo type estao: 
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• text/ecmascript 

• text/jscript 

• text/vbscript 

• text/vbs 

O primeiro valor type listado especifica que o script e interpretado como ECMAScript, 
baseado no padrao de scripting ECMA-262.0 valor a seguir faz com que o script seja 
interpretado como JScript, uma variagao de ECMAScript que a Microsoft implementa 
no Internet Explorer. Os dois ultimos valores sao para o VBScript da Microsoft, uma 
linguagem de scripting completamente diferente. 

Todos esses valores de type descrevem o tipo MIME do conteudo. MIME, ou Multi¬ 
purpose Internet Mail Extension, e uma forma de identificar como o conteudo esta 
codificado (p. ex., text) e seu formato especifico (javascript). Fornecendo um tipo 
MIME, os navegadores capazes de processar o tipo o fazem, enquanto outros nave- 
gadores pulam a segao. Isso garante que apenas aplicagoes que possam processar o 
script realmente o acessem. 

Versoes anteriores da tag script recebiam um atributo language, que era usado para 
designar a versao da linguagem, assim como o tipo: javascriptl.2 em comparagao a 
javascript 1.1. Entretanto, o uso de language ficou obsoleto em HTML 4.01, embora 
ainda aparega em muitos exemplos de JavaScript. Ai esta uma das primeiras tecnicas 
multinavegadores. 



Uso o termo multinavegadores para denotar JavaScript que funciona em todos os 
navegadores-alvo, ou que usa funcionalidades para gerenciar quaisquer diferengas 
de modo que a aplicagao funcione em “multiplos navegadores”. 


Anos atras, ao trabalhar com problemas relacionados a compatibilidade de multiplos 
navegadores, nao era incomum que se criasse um script especifico para cada navegador 
em uma segao ou arquivo separado e depois se usasse o atributo language para assegurar 
que apenas um navegador compativel pudesse acessar o codigo. Examinando alguns 
de meus exemplos antigos (por volta de 1997), encontrei o seguinte: 
cscript src="ns4_obj.js" language="javascriptl.2"> 

</script> 

cscript src="ie4_obj.js" language="jscript"> 

</script> 

A filosofia dessa abordagem era que apenas um navegador capaz de processar JavaS¬ 
cript 1.2 poderia pegar o primeiro arquivo (principalmente o Netscape Navigator 
4.x na epoca) e apenas um navegador capaz de processar JScript poderia pegar o 
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segundo arquivo (Internet Explorer 4). Pouco pratico? Claro, mas tambem funcio- 
nou nos primeiros anos de tentativas de se lidar com efeitos de paginas dinamicas 
frequentemente falhados em multiplos navegadores. 

Outros atributos de scripts validos sao src, defer e charset. O atributo charset define a 
codificagao de caracteres usada com o script. Geralmente nao e estabelecido a menos 
que voce precise de uma codificagao diferente de caracteres da que estiver definida 
para o documento. 

Um atributo que pode ser bastante util e defer. Se voce configurar defer com um valor 
de "defer", isso indica ao navegador que o script nao ira gerar qualquer conteudo de 
documento e que o navegador pode continuar processando o resto do conteudo da 
pagina, retornando para o script quando a pagina river sido processada e exibida: 
cscript type="text/javascript" defer="defer"> 

... nenhum conteudo sendo gerado 
</script> 

O atributo defer pode ajudar a acelerar o carregamento da pagina quando voce river 
um bloco maior de JavaScript ou incluir uma biblioteca maior de JavaScript. 

O ultimo atributo, src, tem a ver com o carregamento de arquivos JavaScript externos, 
o que voce vera mais adiante. Primeiro, porem, examinaremos mais de perto o atributo 
de tipo text/javascript e o que isso significa para cada navegador. 


Adigao de script ao corpo do documento 

Mencionei anteriormente que o elemento script geralmente e adicionado ao elemento 
head de uma pagina web porque e mais facil realizar a manutengao de paginas web 
quando os elementos script estao organizados em um so local. Todavia, ha um motivo 
valido para incluir scripts dentro do elemento body: o desempenho. 

Quando scripts sao adicionados ao elemento head, o resto do documento nao precisa 
ser trazido ate que o script tenha terminado de ser carregado porque os navegadores 
carregam muitos recursos em paralelo do mesmo dominio. Alem disso, o navegador 
pode ter que esperar para exibir o resto da pagina porque pode haver um elemento 
document. write dentro do script. Se os arquivos JavaScript forem grandes, as imagens da 
pagina web e outras informagoes importantes podem demorar, talvez alem do viavel. 

Mesmo o uso do atributo defer no elemento script nao tera impacto nos problemas 
de carregamento paralelo ou renderizagao da pagina. 

No livro High Performance Web Sites (O’Reilly), Steve Souders recomenda a coloca- 
gao dos elementos script na parte de baixo de um documento, para permitir que 
o resto da pagina web seja carregada primeiro, antes do script. Os desenvolvedores 
de aplicagoes web mais complexas priorizam essa abordagem. A desvantagem de se 
colocar o script no final da pagina e que o script fica mais dificil de ser encontrado, 
e a manutengao das paginas, mais dificil. 
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Qual e a melhor abordagem? Descobri que a maioria dos websites nao incorpora 
bibliotecas JavaScript que sejam tao grandes que a colocagao de scripts se torne um 
problema, nao em comparagao a importancia de ser capaz de garantir que as paginas 
sejam mais faceis de manter. Ainda assim, se voce desenvolver bibliotecas JavaScript 
mais complexas, talvez deva considerar uma mudanga para scripts baseados em 
rodapes. 

Independentemente da abordagem que voce usar, seja consistente: coloque seus scripts 
sempre no elemento head ou sempre na parte de baixo do elemento body. 


JavaScript versus ECMAScript versus JScript 

O exemplo 1.2 usava o tipo text/javascript com o elemento script, e a aplicagao funciona 
no Firefox, IE, Opera e Safari. Entretanto, nem todos os navegadores implementam 
JavaScript. 

Embora o nome “JavaScript” tenha se tornado onipresente para scripting baseados 
em navegadores no lado cliente, apenas Mozilla e seu popular navegador, o Firefox, 
implementam JavaScript, que e o nome real de uma instancia de uma especi ficagao de 
scripting mais ampla, a ECMAScript. ECMAScript e, na verdade, uma especificagao 
de scripting no lado cliente que abrange todo o mercado. A versao mais recente de 
ECMAScript e ECMA-262, Edigao 3. 

Contudo, a maioria dos navegadores reverencia o tipo text/javascript, alem do mais 
apropriado (embora muito menos comum) text/ecmascript, embora possam existir 
diferengas, ate mesmo significativas, em exatamente o que cada navegador ou outra 
aplicagao suporta. 

—| 

0 * ECMAScript nao se restringe apenas a navegadores: o suporte ActionScript da 
I * :>, Adobe em Flash e baseado em ECMA-262, Edigao 3. 


Todos os navegadores usados para testar as aplicagoes deste livro - Firefox 3.x, Safari 
3.x, Opera 9.x e IE8 - suportam a maioria, senao toda, ECMA-262, Edigao 3, e ate 
uma parte da proxima geragao de ECMAScript, ECMAScript 3.1 (e posteriores). Neste 
livro, farei observagoes sempre que houver diferengas nos navegadores ou fornecerei 
formas para contornar problemas relacionados ao uso em mais de um navegador. 
Tambem usarei o text/javascript mais familiar para o atributo de tipo do elemento 
script, conforme mostrado no exemplo 1.2. 
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Definigao de fringes em JavaScript 

No exemplo 1.2, a parte de JavaScript que realmente cria a mensagem “Hello, World! ” 
existe dentro de uma fungao chamada hello. Fungoes sao formas de modularizar uma ou 
mais linhas de script de forma que possam ser executadas uma ou mais vezes. Voce tam- 
bem pode usar fungoes para controlar quando o script modularizado e executado. Por 
exemplo, no exemplo 1.2, a fungao e chamada apenas apos a pagina web ser carregada. 

Aqui esta a sintaxe tipica para a criagao de uma fungao: 
function nomeFunfao(parametros) { 

1 

A palavra-chave function e seguida pelo nome da fungao e por parenteses contendo 
zero ou mais parametros (argumentos da fungao). No exemplo 1.2, nao ha parame- 
tros, mas veremos muitos exemplos com parametros por todo o livro. O script que 
constitui a fungao fica entre as chaves. 

Eu digo “tipica” quando fornego a sintaxe da fungao porque essa nao e a unica sin¬ 
taxe que voce pode usar para criar uma fungao. Entretanto, veremos outras variagoes 
comegando pelo capitulo 5, que cobre fungoes JavaScript em detalhes. 

E claro que, assim que voce tiver uma fungao, tem que chama-la para executar o script 
que ela content, o que nos leva aos manipuladores de eventos. 

Manipuladoresdeeventos 

Na tag body de abertura do exemplo 1.2, um atributo HTML chamado onload e atribuido 
a fungao hello. O atributo onload e o que e conhecido como manipulador de eventos. 
Esse manipulador de eventos, e outros, e parte do modelo de objetos associado que 
cada navegador fornece. 

Voce usa manipuladores de eventos para mapear uma fungao para um evento es- 
pecifico de modo que, quando o evento ocorrer, o script da fungao seja processado. 
Um dos manipuladores de eventos mais usados e o recem-demonstrado, o evento 
onload anexado ao elemento body. Quando a pagina web tiver sido carregada, o evento 
e disparado, e o manipulador chama a fungao mapeada. 

Veja alguns mapeadores de eventos normalmente usados: 
onclick 

Disparado quando o elemento recebe um clique do mouse, 
onmouseover 

Disparado quando o cursor do mouse esta sobre o elemento. 
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onmouseout 

Disparado quando o cursor do mouse nao esta mais sobre o elemento. 


onfocus 

Disparado quando o elemento recebe o foco (por meio do mouse ou do teclado). 


onblur 

Disparado quando o elemento nao tem mais o foco. 

Estes sao apenas alguns dos manipuladores de eventos, e nem todos os elementos 
suportam todos os manipuladores. O manipulador de eventos onload e suportado 
por apenas alguns elementos, como os elementos body e img - o que nao e surpresa, 
ja que o evento esta associado ao carregamento de algo. 

Acrescentar um manipulador de eventos diretamente a tag de abertura e uma forma 
de anexa-lo. Uma segunda tecnica ocorre diretamente dentro de JavaScript usando 
uma sintaxe como a seguinte: 
cscript type="text/javascript"> 
window.onload=hello; 
function hello(??) { 

// diz alo para o mundo 
var msg = "Hello, World!"; 
document.openQ; 
document.writeln(msg); 
document. closeQ; 

} 

</script> 

O manipulador de eventos onload e uma propriedade de outro objeto interno de 
navegador, o window. A primeira linha do script atribui a fungao hello diretamente ao 
manipulador de eventos onload da janela. 

j I Fungoes em JavaScript tambem sao objetos em JavaScript, de modo que voce 

S i P 0 ^ e atri ^ uir uma l un ?ao, por nome ou diretamente, a uma variavel ou outra 
i k-.' propriedade do objeto. 


Usando a abordagem da propriedade do objeto, voce nao tem que adicionar mani¬ 
puladores de eventos como atributos em tags de elementos, mas pode em vez disso 
adiciona-los ao proprio JavaScript. Entraremos em maiores detalhes sobre manipu¬ 
ladores de eventos e formas mais avanqadas de manipulagao de eventos no inicio do 
capitulo 7. Enquanto isso, examinaremos mais de perto o objeto document. 
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Objeto document de navegador 

O exemplo 1.2, embora pequeno, usou um dos objetos mais poderosos disponiveis em 
seu navegador: o objeto document. Esse objeto e, para todas as intengoes e propositos, 
uma representagao da pagina, incluindo todos os elementos dentro dela. E por meio 
do document que podemos acessar o conteudo da pagina e, como voce acabou de ver, 
e por meio dele que tambem podemos modificar os conteudos da mesma. 

O document content colegoes mapeadas a elementos da pagina, como todas as imagens 
ou elementos de formulario da pagina. Tambem content metodos que voce pode usar 
tanto para acessar quanto para alterar a pagina web, incluindo os metodos open, writeln 
e close usados no exemplo 1.2. 

O metodo open abre o documento para gravagao. No exemplo 1.2, o documento aberto 
era o mesmo no qual o script estava. O metodo writeln e uma variagao do metodo 
write, que imprime uma string de texto no documento. A unica diferenga entre eles e 
que writeln tambem insere um caractere de nova linha apos o texto. O metodo close 
fecha o documento e tambem forga a exibigao imediata do conteudo do mesmo. 



Uma consequencia negativa de se gravar sobre documentos existentes e que, com 
o IE, pelo menos com a versao beta do IE8, voce perdera a funcionalidade de seu 
botao de retorno. 


Os metodos open e close nao sao necessarios para o exemplo 1.2, ja que os navega- 
dores abrirao e fecharao automaticamente o documento quando o metodo writeln 
for chamado depois de ele ja ter sido carregado. Se voce usasse o script no corpo da 
pagina, precisaria chamar explicitamente o metodo open. 

O document, assim como o metodo window mencionado anteriormente, faz parte de uma 
hierarquia de objetos conhecida como Browser Object Model (BOM). Esse modelo e 
um conjunto basico de objetos implementados na maioria dos navegadores modernos. 
Abordarei o document e outros objetos BOM no capitulo 9. 

BOM e a versao mais antiga do Document Object Model (DOM), mais formal, e 
as vezes e chamado de DOM Nivel 0. 



Operador property 

No exemplo 1.2, voce acessou os metodos do objeto document por meio de um dos 
muitos operadores suportados em JavaScript: o operador property, representado por 
um operador de ponto simples (.). 

Diversos operadores estao disponiveis em JavaScript: os aritmeticos (+, -), os de ex- 
pressoes condicionais (>, <) e outros que detalharei mais adiante neste livro. Um dos 
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mais importantes, todavia, e o operador property. Elementos de dados, manipuladores 
de eventos e metodos de objetos sao todos considerados propriedades de objetos 
dentro de JavaScript, e e possivel acessar todos eles por meio do operador property. 

Voce tambem usa esse operador em um processo chamado de encadeamento de 
metodos, ou as vezes apenas encadeamento, por meio do qual voce pode aplicar 
chamadas a multiplos metodos, uma apos a outra, sendo todas dentro da mesma 
instrugao. Veremos o exemplo a seguir no livro: 

var tstValue = document.getElementById("test").style.backgroundColor="#ffffff"; 

Neste exemplo, um elemento page e acessado usando o metodo getElementByld do docu- 
mento, e seu objeto style e acessado para configurar a cor de fundo desse elemento. 
A propriedade backgroundColor pertence ao objeto style, que e uma propriedade do 
objeto document. 

Cobrirei todos esses metodos e objetos em capitulos posteriores, mas queria apresen- 
tar o encadeamento de metodos agora, j a que voce o vera com bastante frequencia. 
Voce nao pode encadear todas as propriedades de todos os objetos - apenas aquelas 
que retornam um objeto. 

^—I 

0 « Uma das bibliotecas Ajax mais populares JQuery, faz uso intenso de encadeamento 

'■V £ ;i, de metodos. Cobrirei a JQuery rapidamente no capitulo 14. 


Palavra-chavevareoescopo 

A string “Hello World!” que usei no exemplo 1.2 e atribuida a um objeto chamado 
msg, que e um exemplo de uma variavel JavaScript. Uma variavel nada mais e que uma 
referenda nomeada a determinados dados. Os dados podem ser uma string, como 
no exemplo 1.2, um numero, ou o valor booleano true ou false. Eles tambem podem 
ser uma referenda a uma fungao, a um array ou a outro objeto. 

No exemplo, defini a variavel com a palavra-chave var. Quando voce usa var com uma 
variavel, esta definindo essa variavel com escopo local, o que significa que voce pode 
acessa-la apenas dentro da fungao na qual a definiu. Se eu nao usasse var, a variavel 
msg seria global e teria escopo dentro e fora da fungao. Usar uma variavel global em 
um contexto local nao e uma coisa ruim - e pode ser necessario as vezes - mas nao 
e uma boa pratica e deve ser evitada, se possivel. 

O motivo pelo qual voce deve querer evitar variaveis globais e porque, se a aplicagao 
fizer parte de uma aplicagao JavaScript maior, msg pode estar em uso em outra parte 
do codigo em outro arquivo e voce tera sobrescrito os dados que ela continha ori- 
ginalmente. Ou, se voce criar uma variavel global chamada msg, o script de alguma 
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outra biblioteca poderia sobrescreve-la nao usando de forma correta a palavra-chave 
var, e os dados que voce estava registrando serao perdidos. 

Estabelecer o escopo de uma variavel e importante se voce tiver variaveis globais 
e locais com o mesmo nome. O exemplo 1.2 nao tem variaveis globais com algum 
nome, mas e importante que se desenvolvam boas praticas de codificagao JavaScript 
desde o inicio. 

Aqui estao as regras quanto ao escopo: 

• Se voce declarar uma variavel com a palavra-chave var em uma fungao ou em 
um bloco de codigo, seu uso e local aquela fungao. 

• Se voce usar uma variavel sem declara-la com a palavra-chave var, e existir uma 
variavel global com o mesmo nome, a variavel local e assumida como sendo a 
global ja existente. 

• Se voce declarar uma variavel localmente com uma palavra-chave var, mas nao 
a inicializar (i.e., atribuir um valor a ela), ela sera local e ficara acessivel, mas 
nao definida. 

• Se voce declarar uma variavel localmente sem a palavra-chave var, ou se 
declara-la explicitamente como global mas nao a inicializar, ela sera acessivel 
globalmente, mas tambem nao estara definida. 

Usando var dentro de uma fungao, voce pode evitar problemas ao usar variaveis globais 
e locais com o mesmo nome. Isso e particularmente importante ao se usar bibliotecas 
JavaScript - como Dojo, jQuery e Prototype - porque voce nao sabera que nomes de 
variaveis o outro codigo JavaScript esta usando. 

Instrugoes (statements) 

JavaScript tambem suporta diferentes tipos de instrugoes de processamento, co- 
nhecidos como instrugoes. O exemplo 1.2 demonstrou um tipo basico de instrugao 
em JavaScript: a atribuigao, na qual um valor e atribuido em uma variavel. Outros 
tipos de instrugao sao lagos for, que processam um bloco de script um determinado 
numero de iteragoes; a instrugao condicional if...else, que verifica uma condigao 
para ver se um bloco de script e executado; a instrugao switch, que verifica um valor 
dentro de um determinado conjunto e a seguir executa o bloco de script associado 
a esse valor; e assim por diante. 

Cada tipo de instrugao contem determinados requisitos sintaticos. No exemplo 1.2, a 
instrugao de atribuigao terminava com um ponto-e-virgula. Usar um ponto-e-virgula 
para terminar uma instrugao nao e um requisito em JavaScript, a menos que voce 
queira digitar muitas instrugoes na mesma linha. Se for faze-lo, tera que inserir um 
ponto-e-virgula para separar as instrugoes individuais. 
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Quando voce digita uma instrugao completa em uma linha, usa uma quebra de linha 
para termina-lo. Todavia, da mesma forma que com o uso de var, e uma boa pratica 
usar ponto-e-virgulas para terminar todas as instrugoes, senao para tornar o codigo 
mais facil de ler. Veja mais sobre o ponto-e-virgula, outros operadores e instrugoes 
no capitulo 3. 

Comentarios 

Como espero que este capitulo demonstre, ha muita coisa em JavaScript, mesmo 
em uma aplicagao pequena como a do exemplo 1.2. Espere um pouco, porem, ja que 
ainda nao terminamos. Por fim, mas certamente nao menos importante, vamos ver 
um pouco mais sobre comentarios em JavaScript. 

Os comentarios fornecem um resumo ou explicagao do codigo que se segue. Co¬ 
mentarios em JavaScript sao uma forma extremamente util de fazer observagoes 
rapidamente sobre o que um bloco de codigo faz ou quais dependencias ele tem. 
Eles tornam o codigo mais legivel e mais facil de manter. 

Voce pode usar dois tipos diferentes de comentarios em suas aplicagoes. O primeiro, 
usando as barras duplas (//), comenta o que estiver a seguir na mesma linha: 

// Esta e uma linha comentada 

van i = 1; // este e um comentario de linha 

O segundo faz uso dos delimitadores de abertura e fechamento de comentarios em 
JavaScript, /* e */, para marcar um bloco de comentarios que pode se estender por 
uma ou mais linhas: 

/* Este e um comentario multilinhas 

que se estende por tres linhas. Comentarios multilinhas sao especialmente uteis para 
comentar uma funpao*/ 

Comentarios de apenas uma linha sao relativamente seguros de usar, mas os de varias 
linhas podem gerar problemas se o caractere inicial ou final for apagado acidentalmente. 

Em geral, usamos comentarios de linha unica antes de um bloco de script executando 
um determinado processo ou criando um objeto especifico; usamos comentarios de 
blocos de varias linhas no inicio de um arquivo JavaScript. Uma boa pratica a adotar 
com JavaScript e comegar cada bloco, fungao ou definigao de objeto em JavaScript com 
pelo menos uma linha de comentario. Alem disso, fornega um bloco de comentarios 
mais detalhados no inicio de todos os arquivos de bibliotecas em JavaScript; inclua 
informagoes sobre autor, data e dependencias, assim como um objetivo detalhado 
do script. 

Ja exploramos o que voce viu no exemplo 1.2. Agora examinaremos o que voce nao viu. 
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0 que voce nao viu: segoes CDATA e comentarios em HTML 

Ha dez anos, quando a maioria dos navegadores estava em sua primeira ou segunda 
versao, o suporte a JavaScript era vago, com cada navegador implementando uma 
versao diferente. Quando os navegadores, como o Lynx baseado em texto, encontravam 
a tag script, geralmente apenas imprimiam a saida na pagina. 

Para evitar isso, o conteudo do script ficava dentro de comentarios HTML: <!-- e 
Quando comentarios em HTML eram usados, navegadores que nao suportavam 
JavaScript ignoravam o script dentro desses comentarios, mas os navegadores mais 
novos sabiam executa-lo. 

Era algo nao muito sofisticado, porem, muito usado. A maioria das paginas web com 
JavaScript atualmente apresenta comentarios HTML acrescentados porque e mais 
comum que o script seja copiado do que nao. Infelizmente, alguns navegadores novos 
hoje podem processar a pagina web como XHTML, e estritamente como XML, o 
que significa que o codigo comentado e descartado. Como consequencia, o uso de 
comentarios em HTML para “esconder” o script e desencorajado. 

Outra forma de “esconder” script, porem, e encorajada: por meio do uso da segao 
XML CDATA, especialmente se o script for ser usado em XHTML. O exemplo 1.3 e uma 
modificagao do exemplo 1.2 com a adigao de uma segao CDATA, mostrada em negrito. 

fo Exemplo 1.3 - Modificagao do exemplo 1.2 para acrescentar uma se$ao CDATA para "esconder" o script 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<title>Hello, World!</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="text/javascript"> 

//<![CDATA[ 
function helloQ { 

// diz alo para o mundo 

var msg = "Hello, <em>World!</em>"; 

document.openQ; 

document.write(msg); 

document. closeQ; 

} 

//]]> 

</script> 

</head> 

<body onload="hello()"> 

<p>Hi</p> 

</body> 

</html> 
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O motivo para a segao CDATA e que processadores XHTML interpretam marcagao, como 
as tags de abertura e fechamento em nesse novo exemplo, mesmo quando eles estao 
dentro de strings JavaScript. Embora o script possa ser processado corretamente e 
tambem exibir a pagina de forma correta, se voce tentar valida-lo sem a segao CDATA 
obtera erros de validagao, conforme mostra a figura 1.1 


0 0 6 [Invalid] Markup Validation of http://burningbird.net/lj2/ch01-01.xhtml - W3C Markup Validator 



Validation Output: 1 Error 


O Line 11, Column 24: document type does not allow element "em" here. 



Ifcjsholmao.s - Al°°» » „ 


Figura 1.1 - Erro de validagao sem o uso da segao CDATA. 

Supoe-se que o JavaScript que e importado para a pagina usando o atributo src 
do elemento script seja compativel com XHTML e nao requeira a segao CDATA. Voce 
deve, contudo, delimitar JavaScript in-line ou embutido com CDATA, especialmente 
se estiver dentro do elemento body. Para a maioria dos navegadores, voce tambem 
precisara esconder as tags de abertura e fechamento da segao CDATA com comentarios 
(//), conforme mostrado anteriormente no exemplo 13, ou obtera um erro JavaScript. 

E claro que a melhor forma de manter suas paginas web organizadas e remover in- 
teiramente JavaScript das mesmas, por meio do uso de arquivos JavaScript. 

A maioria dos exemplos deste livro e inserida nas paginas principalmente para torna- 
las mais faceis de serem lidas e seguidas. Todavia, a Mozilla Foundation recomenda (e 
eu concordo) que todo JavaScript in-line ou embutido seja removido de uma pagina 
e colocado em arquivos JavaScript separados. Usar um arquivo separado, o que e 
coberto na proxima segao, evita problemas com validagao e interpretagao incorreta 
de texto, independentemente de a pagina ser processada como HTML ou XHTML. 



Arquivos JavaScript tambem sa 
cache na primeira vez em que 
arquivo sao trazidas da cache. 


is eficientes, ja que o navegador os coloca em 
:arregados. Referencias adicionais ao mesmo 
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Arquivos JavaScript 

O uso de JavaScript esta se tornando mais orientado a objetos e complexo. Para 
simplificar seu trabalho, assim como para compartilha-lo, desenvolvedores JavaScript 
estao criando objetos JavaScript reutilizaveis que podem ser incorporados em mui- 
tas aplicagoes, incluindo aquelas criadas por outros desenvolvedores. A unica forma 
eficiente de se compartilhar esses objetos e cria-los em arquivos separados e fornecer 
um link para cada arquivo na pagina web. Agora com o codigo em arquivos, tudo o 
que o desenvolvedor precisa fazer e conectar o codigo as paginas web. Se o codigo 
precisar ser alterado posteriormente, ele o e em apenas um lugar. 

Atualmente, mesmo o JavaScript mais simples e criado em arquivos de script sepa¬ 
rados. Qualquer overhead que seja criado pelo uso de varios arquivos e compensado 
pelos beneficios gerados. Para incluir uma biblioteca JavaScript ou arquivo de script 
em sua pagina web, use esta sintaxe: 

<script type="text/javascript" src="aLgumjavascript. js''x/script> 

O elemento script nao content conteudo, mas a tag de fechamento ainda assim e 
necessaria. 

O navegador carrega os arquivos de script para a pagina na ordem na qual eles apa- 
recem na mesma e os processa em ordem a menos que defer seja usado. Um arquivo 
de script deve ser tratado como se o codigo estivesse realmente inserido na pagina: o 
comportamento nao e diferente entre arquivos de script e blocos de JavaScript embutido. 

O exemplo 1.4 e outra modificagao de nossa aplicagao “Hello, World! ” exceto que, dessa 
vez, o script e movido para um arquivo separado, chamado helloworld.js. A extensao 
.js e necessaria, a menos que voce direcione o servidor web para usar alguma outra 
extensao para representar o tipo MIME JavaScript. Entretanto, pelo fato de a .js ser 
usada como padrao ha anos, e melhor nao inventar moda. 

^ I Toda regra sempre tem excegoes, e o uso de .js e uma delas. Se o JavaScript for 
£ ( gerado dinamicamente usando uma aplicagao no lado servidor construida em 
« K-.’ uma linguagem como PHP, o arquivo tera uma extensao diferente. 


O exemplo 1.4 content o script, e o exemplo 1.5 mostra a pagina web agora alterada. 

fo Exemplo 1.4-0 script Hello World em um arquivo separado 

/* 

funfao: hello 
autoria: Shelley 

hello imprime a mensagem "Hello, World!" 

*1 
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function helloQ { 

// diz alo para o mundo 

var msg = "Hello, <em>World!</em>"; 

document.open(); 

document.write(msg); 

document. closeQ; 

} 

■=> Exemplo 1.5 - A pagina web, agora chamando um arquivo de script externo 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<title>Hello, World!</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

cscript type="text/javascript" src="helloworld.js"> 

</script> 

</head> 

<body onload="hello()"> 

<p>Hi</p> 

</body> 

</html> 

Como voce pode ver, a pagina fica muito mais limpa, e a aplicagao e mais eficiente a 
partir de uma perspectiva de manutengao. Alem disso, outras aplicagoes agora podem 
reutilizar o codigo. Embora seja improvavel que voce reutilizasse algo tao simples 
quanto o script “Hello, World!”, criara exemplos mais adiante neste livro nos quais a 
reutilizagao se torna mais importante. 

Temos uma ultima segao de material a cobrir neste capitulo antes de passar para 
variaveis e tipos de dados no capitulo 2. 

Acessibilidade e melhores praticas em JavaScript 

Em um mundo ideal, todos aqueles que visitam seu website usariam o mesmo tipo de 
sistema operacional e navegador e teriam JavaScript habilitado. Seu site nunca seria 
acessado por meio de um telefone celular ou algum outro dispositivo diferente, pessoas 
com deficiencias visuais nao precisariam de leitores de telas e as com problemas de 
paralisia nao precisariam de navegagao ativada por voz. 

Este nao e um mundo ideal, mas muitos desenvolvedores JavaScript codificam como 
se fosse. Ficamos tao envolvidos com as maravilhas que podem criar que esquecemos 
que nem todo mundo pode compartilha-las. 
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Muitas das melhores praticas estao associadas a JavaScript mas, se houver uma para 
se usar deste livro, e a seguinte: seja qual for a funcionalidade JavaScript que voce 
crie, ela nao deve atrapalhar o uso de seu site pelos visitantes. 

O que quero dizer por “atrapalhar o uso do seu site pelos visitantes”? Quero dizer que 
voce deve evitar o uso de JavaScript de uma forma em que aqueles que nao podem, ou 
nao irao, habilitar JavaScript, fiquem impedidos de acessar recursos essenciais do site. 
Se voce criar um menu drop-down usando JavaScript, tambem precisa fornecer uma 
alternativa que nao use script. Se seus visitantes tiverem deficiencias visuais, JavaScript 
nao deve interferir em navegadores de audio, o que acontece quando instrugoes sao 
adicionadas a uma pagina dinamicamente. 

Muitos desenvolvedores nao seguem esses principios porque supoem que as praticas 
requerem trabalho adicional e, em sua maior parte, requerem. Entretanto, o trabalho 
nao precisa ser um fardo - nao quando os resultados podem aumentar a acessibilidade 
de seu site. Alem disso, muitas empresas agora exigem que seus websites satisfagam a 
um determinado nivel de acessibilidade. E melhor desenvolver o habito de criar pagi- 
nas acessiveis no inicio do que tentar conserta-las, ou seus habitos, posteriormente. 

Diretrizesde acessibilidade 

O site WebAIM ( http://www.webaim.org ) content um otimo tutorial sobre a criagao 
de JavaScript acessivel (disponivel em http://www.webaim.org/techniques/javascrip /). 
Ele cobre as maneiras como voce nao deve usar JavaScript, como o uso de JavaScript 
para menus e outros tipos de navegagao. Todavia, o site fornece formas para voce usar 
JavaScript para tornar um site mais acessivel. 

Uma sugestao e basear a resposta em eventos que possam ser disparados quer voce 
use um mouse ou nao. Por exemplo, em vez de capturar cliques do mouse, voce deve 
capturar eventos que sejam disparados se voce usar um teclado ou um mouse, como 
onfocus e onblur. Se voce river um menu drop-down, adicione um link para uma pagina 
separada e fornega um menu estatico nessa segunda pagina. 

Depois de revisar o tutorial na WebAIM, voce talvez queira dedicar algum tempo 
a Web Accessibility Initiative do World Wide Consortium (W3C) (em http://www. 
w3.orh/WAI /). A partir dai, voce tambem pode acessar o website da Segao 508 do 
governo norte-americano ( http://www.section508.gov/ ), que discute o que e conheci- 
do como “compatibilidade 508”. Sites que sejam compativeis com a Segao 508 sao 
acessiveis independentemente de restrigoes fisicas. Nesse website, voce pode acessar 
diversas ferramentas que avaliam seu site quanto a acessibilidade, como Cynthia Says 
(em http://www.cynthiasays.com/). 
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Esteja seu site localizado dentro dos Estados Unidos ou nao, voce desejara que ele seja 
acessivel. Assim, uma visita a Segao 508 e util independentemente de sua local izagao. 

E claro que nem todos os problemas de acessibilidade estao relacionados aqueles 
navegadores nos quais JavaScript esta limitado ou desabilitado como padrao, como 
com leitores de tela. Muitas pessoas nao confiam em JavaScript, ou nao ligam para a 
linguagem e preferem desabilita-la. Para ambos os grupos de pessoas - aquelas que 
preferem nao usar JavaScript e as que nao tem escolha - e importante que se forne- 
gam alternativas quando nenhum script estiver presente. Uma alternativa e noscript. 

noscript 

Alguns navegadores ou outras aplicagoes nao estao preparados para processar Ja¬ 
vaScript ou estao limitados no modo de interpretagao do script. Se JavaScript nao 
for essencial para a navegagao ou interagao, e o navegador ignorar o script, nao ha 
prejuizo. Entretanto, se JavaScript for essencial para o acesso de recursos do site e 
voce nao fornecer alternativas, esta basicamente mandando essas pessoas embora. 

Anos atras, quando JavaScript era razoavelmente uma novidade, uma abordagem 
popular era fornecer uma pagina simples ou apenas de texto acessivel por meio de 
um link, geralmente colocado no topo da pagina. Contudo, a quantidade de trabalho 
para realizar a manutengao dos dois sites poderia ser proibitiva e os desenvolvedores 
tinham que se preocupar constantemente em manter os sites sincronizados. 

Uma tecnica melhor e fornecer alternativas estaticas ao conteudo dinamico gerado 
por script. Quando voce usa JavaScript para criar um menu drop-down, tambem for- 
nece um menu com links hierarquicos padrao; quando voce usa script para mostrar 
elementos de formulario para edigao baseados em interagao com o usuario, fornece 
os links mais tradicionais para uma segunda pagina fazer o mesmo. 

O elemento que permite tudo isso e noscript. Onde quer que voce precise de conteudo 
estatico, adicione um elegante noscript com o conteudo dentro das tags de abertura e 
fechamento. Assim, se um navegador ou outra aplicagao nao puder processar o script 
(devido a JavaScript nao estar habilitado por algum motivo), o conteudo noscript e 
processado; caso contrario, ele e ignorado. 

O exemplo 1.6 e uma ultima variagao de “Hello, World!” mostrando o exemplo 
protegido por CDATA modificado com a adigao de noscript. Acessar a pagina com um 
navegador habilitado com JavaScript deve exibir uma pagina com “Hello, World!” 
impresso. Entretanto, se voce acessar essa pagina com um navegador com scripts 
desabilitados, uma mensagem diferente sera exibida. 
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^ Exemplo 1.6-0 uso de noscript para navegadores sem JavaScript habilitado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<title>Hello, World!</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="text/javascript"> 

//<![CDATA[ 
function hello() { 

// diz alo para o mundo 
var msg = "Hello, <em>World!</em>"; 
document.open(); 
document.write(msg); 
document. closeQ; 

} 

//]]> 

</script> 

</head> 

<body onload="hello()"> 

<noscript> 

<p>I'm still here, World!</p> 

</noscript> 

</body> 

</html> 

E claro que o exemplo 1.6 e apenas um uso simplificado de noscript; voce vera usos 
mais sofisticados mais adiante no livro, assim como metodos alternativos com pro- 
tegao para scripts. 

Para testar o exemplo 1.6, usei uma extensao Firefox chamada de Web Developer 
Toolbar. Nessa barra flea uma opgao para desabilitar o suporte a JavaScript. Quan- 
do JavaScript estiver ativo, a mensagem original “Hello, World!” e exibida. Contudo, 
quando uso a ferramenta para desativar o suporte a JavaScript, outra mensagem 
exibe: I'm still here, world! Embora voce possa desativar o scripting diretamente no 
navegador, descobri que ferramentas de desenvolvimento como a Web Developer 
Toolbar tornam o teste muito mais facil. 

Quais ferramentas voce usa depende do navegador com o qual voce prefere desenvolver. 
Prefiro desenvolver com o Firefox e fazer uso extensivo da Web Developer Toolbar e do 
Firebug, uma ferramenta sofisticada de depuragao. Mais adiante, no capitulo 6, que cobre 
a deteegao e solugao de problemas e a depuragao, examinaremos mais de perto esses 
topicos, assim como outras ferramentas e opgoes disponiveis para outros navegadores. 



